<template>
  <div class="container">
    <div class="box" v-for="(item, index) in newList" :key="index">
      <div>姓名 {{ item.name }}</div>
      <div>
        电话 s<span v-if="item.show">{{ item.tel }}</span>
        <span v-else>{{ filter(item.tel) }}</span>
        <el-icon @click="toggleStatus(item)">
          <View v-if="item.show" />
          <Hide v-else />
        </el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const list = ref([
  {
    name: "张三",
    age: 18,
    sex: "男",
    tel: "157378978911",
  },
  {
    name: "李四",
    age: 18,
    sex: "男",
    tel: "145798765432",
  },
]);
const newList = ref(
  list.value.map((item) => {
    return {
      ...item,
      show: false,
    };
  })
);
const filter = (tel) => {
  return tel.replace(/(\d{3})\d{4}(\d{4})/, "$1* * * *$2");
};
const toggleStatus = (item) => {
  item.show = !item.show;
  console.log(item);
};
</script>
